<template>
	<view class="message">
		<image class="missback"
			src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/indexback.png" mode="widthFix">
		</image>
		<headers title="消息" navBackcolor="transparent"></headers>
		<view :class="showPublishPageState ? 'filter' : ''">
			<view class="message-main">
				<view class="message-main-search">
					<view class="inputs">
						<input type="text" placeholder="请输入关键词" placeholder-style="color: #8A8F99;">
					</view>
					<view class="search-btn">
						搜索
					</view>
				</view>
				<!-- message -->
				<!-- <view class="index-message">
					<image class="index-message-back"
						src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/messageback.png"
						mode=""></image>
					<view class="index-message-con">
						<image class="index-message-icon"
							src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/messages.png"
							mode=""></image>
						<view class="index-message-center">
							关注公众号，接收聊天消息提醒~
						</view>
						<view class="index-message-btn">
							立即关注
						</view>
					</view>
				</view> -->
				<!-- 待处理申请 -->
				<view class="applyfor">
					<view class="applyfor-head">
						<view class="applyfor-head-name">
							待处理申请
						</view>
						<view class="applyfor-head-btn" @click="gopage('/pages/message/MyApplication')">
							我的申请
						</view>
					</view>
					<view class="applyfor-list">
						<view class="applyfor-item" v-for="(item, index) in ApplyList" :key="index">
							<view class="applyfor-item-avatar">
								<image :src="item.avatar" mode="aspectFill"></image>
							</view>
							<view class="applyfor-item-name">
								{{ item.name }}
								<image
									:src="item.gender ? 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/boy.png' : 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/girl.png'"
									style="width: 36rpx;height: 28rpx;margin-left: 8rpx;" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<!-- tab -->
				<view class="tablist">
					<view class="tab tabs">最近聊天</view>
					<!-- <view style="flex: 1;"> -->
					<view class="tab-btn">
						好友列表
					</view>
					<!-- </view> -->
				</view>
				<!-- 消息列表 -->
				<view class="list">
					<view class="item">
						<view class="icon">
							<image
								src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/Group 2848@3x@2x.png"
								mode="widthFix"></image>
						</view>
						<view class="item-right">
							<view class="item-right-head">
								<view class="item-right-name">系统通知</view>
								<!-- <view class="item-right-time">15:54</view> -->
							</view>
							<view class="item-right-desc">
								<text>暂无系统通知～</text>
								<!-- <text>女神节快乐，关爱单身女性...</text> -->
								<!-- <view class="dian"></view> -->
							</view>
						</view>
					</view>
					<view class="item">
						<view class="icon">
							<image
								src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/Group 2849@3x@2x.png"
								mode="widthFix"></image>
						</view>
						<view class="item-right">
							<view class="item-right-head">
								<view class="item-right-name">小编机器人</view>
								<!-- <view class="item-right-time">15:54</view> -->
							</view>
							<view class="item-right-desc">
								<text>暂无消息～</text>
								<!-- <text>女神节快乐，关爱单身女性...</text>
								<view class="dian"></view> -->
							</view>
						</view>
					</view>
					<view class="item">
						<view class="icon">
							<image
								src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/Group 2851@3x@2x.png"
								mode="widthFix"></image>
						</view>
						<view class="item-right">
							<view class="item-right-head">
								<view class="item-right-name">动态通知</view>
								<!-- <view class="item-right-time">15:54</view> -->
							</view>
							<view class="item-right-desc">
								<text>暂无动态～</text>
								<!-- <text>世俗 点赞了你的动态</text> -->
								<!-- <view class="dian"></view> -->
							</view>
						</view>
					</view>
					<view class="item" v-for="(item, index) in MessageList" :key="index" @click="openChat()">
						<view class="icon">
							<image :src="item.avatar" mode="aspectFill"></image>
							<view class="nums" v-if="item.num > 0">
								{{ item.num }}
							</view>
						</view>
						<view class="item-right">
							<view class="item-right-head">
								<view class="item-right-name">{{ item.nickname }}</view>
								<view class="item-right-time">{{ item.time }}</view>
							</view>
							<view class="item-right-desc">
								<text>{{ item.content }}</text>
								<!-- <view class="dian"></view> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-tabbar :v-model="0" :iconSize="48" :height="100" :midButtonSize="112" inactiveColor="#999999"
				activeColor="#2E3033" :list="tabList" :mid-button="true" @change="changeTab"></u-tabbar>
		</view>
		<publish></publish>
	</view>
</template>
<script>
	import LibGenerateTestUserSig from '@/utils/lib-generate-test-usersig-es.min.js';
	//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
	import headers from '@/components/headers/index.vue'
	import publish from '../../components/publish/publish.vue'
	export default {
		// 组件名称
		name: 'demo',
		// 组件参数 接收来自父组件的数据
		props: {},
		// 局部注册的组件,import引入的组件需要注入到对象中才能使用
		components: {
			headers,
			publish
		},
		// 组件状态值
		data() {
			return {
				tabList: this.$store.getters.tabList, // tabbar
				ApplyList: [
					// {
					// 	avatar: 'https://imgapi.cn/cos.php',
					// 	name: '麻衣',
					// 	gender: 0
					// },
					// {
					// 	avatar: 'https://imgapi.cn/cos.php',
					// 	name: '依依',
					// 	gender: 0
					// },
					// {
					// 	avatar: 'https://imgapi.cn/cos.php',
					// 	name: '星野',
					// 	gender: 0
					// },
				],
				MessageList: [
					// 	{
					// 	avatar: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/demo.png',
					// 	num: 0,
					// 	nickname: '是优优呀',
					// 	time: '15:54',
					// 	content: '听说转发这条锦鲤可以转好运哦'
					// },
				],
				is_tab: 1,
				tim: {}
			}
		},
		// 计算属性
		computed: {
			showPublishPageState() {
				return this.$store.getters.showPublishPage
			}
		},
		// 侦听器
		watch: {},
		// 组件方法
		methods: {
			getApplyFriendList() {
				console.log(111111111111111111111111111111111111111111111111111111111)
				let obj = {
					token: uni.getStorageSync('token'),
					type: 2, // 1我的申请2申请列表
					limit: 4
				}
				// this.$http('apply/applyFriendList', obj, '').then(res=>{
				// 	console.log(res,'res,asdjaslkjlj')
				// })
			},
			// 互相心动跳转聊天
			openChat() {
				uni.navigateTo({
					url: '/pages/message/chat'
				})
			},
			changeTab(e) {
				if (e == 2) {
					this.$store.commit("changeShowPublishPage", true)
				}
			},
			// 打开 TUIKit 会话列表
			openConversation() {
				console.log('打开 TUIKit 会话列表')
				uni.navigateTo({
					url: "/TUIKit/components/TUIConversation/index",
				});
			},
			// 打开 TUIKit 联系人
			openContact() {
				console.log('打开 TUIKit 联系人')
				uni.navigateTo({
					url: "/TUIKit/components/TUIContact/index",
				});
			},
			// 
			getConversationList() {
				// 拉取会话列表
				this.tim = this.$TIM.create({
					SDKAppID: this.$config.SDKAppID
				}); // SDK 实例通常用 tim 表示
				console.log(this.tim, 'tim')
				let promise = this.tim.getConversationList();
				promise.then((imResponse) => {
					console.log(imResponse, 'imResponse')
					const conversationList = imResponse.data.conversationList;
					// 会话列表，用该列表覆盖原有的会话列表
					console.log('会话列表', conversationList)
					uni.hideLoading();

				}).catch((imError) => {
					//这块再登录一次是为了避免因刷新等问题而掉线，掉线重新走一遍登录（感觉这里有问题，暂时走的通）
					//因为官网文档上给的是只有退出登录后才会触发监听（比较奇怪）
					this.tim.registerPlugin({
						'tim-upload-plugin': this.$TIMUploadPlugin
					});
					// this.tim.login({ userID: '你的userID', userSig: '你的userSig' });
					console.log(imError); // 获取会话列表失败的相关信息
				});
			},
			genTestUserSig(config) {
				const {
					SDKAPPID,
					SECRETKEY,
					EXPIRETIME,
					userID
				} = config;
				const generator = new LibGenerateTestUserSig(SDKAPPID, SECRETKEY, EXPIRETIME);
				const userSig = generator.genTestUserSig(userID);

				return {
					sdkAppID: SDKAPPID,
					userSig,
				};
			},
			gopage(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		// 以下是生命周期钩子   注：没用到的钩子请自行删除
		/**
		 * 在实例初始化之后，组件属性计算之前，如data属性等
		 */
		beforeCreate() {},
		/**
		 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
		 */
		created() {
			// 登录 即时通信IM
			let SDKAppID = this.$config.SDKAppID,
				SECRETKEY = this.$config.SECRETKEY,
				EXPIRETIME = this.$config.EXPIRETIME,
				config = {
					SDKAPPID: SDKAppID,
					SECRETKEY: SECRETKEY,
					EXPIRETIME: EXPIRETIME,
					userID: 'user1'
				}

			this.tim = this.$TIM.create({
				SDKAppID: SDKAppID
			}); // SDK 实例通常用 tim 表示
			console.log(this.tim, 'tim')
			this.tim.setLogLevel(0); // 普通级别，日志量较多，接入时建议使用
			this.tim.registerPlugin({
				'tim-upload-plugin': this.$TIMUploadPlugin
			});

			// 登录
			// console.log(this.genTestUserSig(config),'e34755821058eb27862b4978477246bbfd675aad10fa6031d6d0491ed0137b6c')
			let users = this.genTestUserSig(config);
			uni.setStorageSync('ImConfig', JSON.stringify({
				userID: 'user1',
				userSig: users.userSig
			}));
			let that = this

			let promise = this.tim.login({
				userID: 'user1',
				userSig: users.userSig
			});
			promise.then(function(imResponse) {
				console.log(imResponse.data, '11111111111111'); // 登录成功
				// uni.setStorageSync('imResponse', JSON.stringify(imResponse.data));
				// if (imResponse.data.repeatLogin === true) {
				// 	// 标识账号已登录，本次登录操作为重复登录
				// 	console.log('即时通讯登录成功', imResponse.data.errorInfo);
				// 	// END 登录 即时通信IM
				// 	this.getConversationList()
				// }
				uni.showLoading({
					title: '加载中'
				});
				setTimeout(() => {
					that.getConversationList()
				}, 1000);
			}).catch(function(imError) {
				console.log('即时通讯login error:', imError); // 登录失败的相关信息
			});
			// 获取好友申请列表
			this.getApplyFriendList()
		},
		/**
		 * 在挂载开始之前被调用：相关的 render 函数首次被调用。
		 */
		beforeMount() {},
		/**
		 * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
		 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
		 */
		mounted() {},
		/**
		 * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
		 * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
		 */
		beforeUpdate() {},
		/**
		 * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
		 * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
		 */
		updated() {},
		/**
		 * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
		 */
		activated() {},
		/**
		 * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
		 */
		deactivated() {},
		/**
		 * 实例销毁之前调用。在这一步，实例仍然完全可用。
		 */
		beforeDestroy() {},
		/**
		 * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
		 * 所有的事件监听器会被移除，所有的子实例也会被销毁。
		 */
		destroyed() {}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<style scoped lang="scss">
	.message {
		width: 100%;
		height: 100%;

		// background: linear-gradient(#F1EFFFFF 0%, #FFFFFF 40%, #F7F8FA 100%);
		// padding-top: $nav-top-height;
		.message-main {
			padding: 0 32rpx;
			position: relative;
			z-index: 9;

			&-search {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 44rpx;

				.inputs {
					width: 598rpx;
					height: 64rpx;
					background: #F5F5F5;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					line-height: 64rpx;
					// text-align: center;
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;

					input {
						padding-left: 60rpx;
						width: 100%;
						height: 100%;
					}
				}

				.search-btn {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #A4A0FE;
				}
			}
		}

		.applyfor {
			width: 100%;
			margin-bottom: 38rpx;

			&-head {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-name {
					font-size: 28rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #2E3033;
				}

				&-btn {
					width: 136rpx;
					height: 52rpx;
					background: #FFFFFF;
					border-radius: 26rpx 26rpx 26rpx 26rpx;
					border: 1rpx solid #B4B4B4;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #5C6166;
					line-height: 52rpx;
				}
			}

			&-list {
				display: flex;
				margin-top: 26rpx;
			}

			&-item {
				margin-right: 40rpx;

				&-avatar {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 12rpx;

					image {
						width: 100%;
						height: 100%;
						display: block;
						border-radius: 50%;
					}
				}

				&-name {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					color: #2E3033;
				}
			}
		}

		.tablist {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.tab {
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #8A9199;
				margin-right: 60rpx;
			}

			.tabs {
				color: #2E3033;
				position: relative;
			}

			.tabs::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				// bottom: -10rpx;
				transform: translateX(-50%);
				width: 28rpx;
				height: 4rpx;
				background: #A4A0FE;
				border-radius: 2rpx 2rpx 2rpx 2rpx;
			}

			.tab-btn {
				width: 136rpx;
				height: 52rpx;
				background: #FFFFFF;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
				border: 1rpx solid #B4B4B4;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #5C6166;
				line-height: 52rpx;
			}
		}

		.list {
			.item {
				display: flex;
				align-items: center;

				&-right {
					flex: 1;
					padding: 32rpx 0;
					border-bottom: 1rpx solid #F5F5F5;

					&-head {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 8rpx;
					}

					&-name {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #2E3033;
					}

					&-time {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #8A9199;
					}

					&-desc {
						font-size: 24rpx;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						color: #8A9199;
						display: flex;
						align-items: center;

						text {
							flex: 1;
						}
					}
				}

				.icon {
					width: 80rpx;
					height: 80rpx;
					margin-right: 16rpx;
					position: relative;

					image {
						width: 100%;
						height: 100%;
						display: block;
						border-radius: 50%;
					}

					.nums {
						position: absolute;
						top: -4rpx;
						right: -4rpx;
						width: 32rpx;
						height: 32rpx;
						background: #FF7339;
						border: 1rpx solid #FFFFFF;
						line-height: 32rpx;
						text-align: center;
						font-size: 20rpx;
						font-weight: normal;
						color: #FFFFFF;
					}
				}
			}

			.dian {
				width: 16rpx;
				height: 16rpx;
				background: #FF7339;
				border-radius: 50%;

			}
		}
	}

	.index {
		margin-bottom: 40rpx;

		&-message {
			width: 100%;
			height: 80rpx;
			position: relative;
			margin-bottom: 32rpx;

			&-back {
				width: 100%;
				height: 100%;
			}

			&-con {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
			}

			&-icon {
				width: 40rpx;
				height: 40rpx;
			}

			&-center {
				flex: 1;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #FFFCE5;
			}

			&-btn {
				width: 136rpx;
				height: 48rpx;
				background: linear-gradient(90deg, #FBE5D7 0%, #EACFCB 100%);
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #752634;
				line-height: 48rpx;
			}
		}
	}
</style>